import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Modal, Form, Select, InputNumber, message } from 'antd';
import moment from 'moment';
import { myMessage } from '../../utils/formatDataSource';
const FormItem = Form.Item;
@connect(({ administration3, loading }) => ({
  administration:administration3,
  loading: loading.models.administration3,
}))
@Form.create()
class TeacherCalendarAddForm extends PureComponent {
  constructor(props) {
    super(props);
  }
  state = {
    addVisible: this.props.addVisible,
    classList: [],
  };
  componentWillUpdate() {
    this.setState({
      visible: this.props.addVisible,
      selectedEvents: this.props.selectedEvents,
      events: this.props.events,
      selectBlankStart: this.props.selectBlankStart,
      onCancel: this.props.onCancel,
      onOk: this.props.onOk,
      classList: this.props.classList,
    });
  }

  handleAddCancel = () => {
    this.props.onCancel();
  };
  handleAddCreate = () => {
    const form = this.props.form;
    const { selectBlankStart, events, classList } = this.state;

    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const lessonEnd = moment(new Date(selectBlankStart))
        .add(values.lessonTime, 'minutes')
        .toDate();
      const { dispatch } = this.props;
      var selectedClass = classList.find((value, index) => {
        return value.id == values.classValues;
      });
      let event = {
        start: selectBlankStart,
        end: lessonEnd,
        clazzId: selectedClass.id,
        className: selectedClass.name,
        classTypeName: selectedClass.classTypeName,
        campusName: selectedClass.campusName,
        classLevel: selectedClass.classLevel,
        planClassTime: values.lessonTime,
      };
      // 获取组装数据  服务器请求完成
      dispatch({
        type: 'administration3/addLesson',
        payload: event,
      }).then(() => {
        const { addLessonDateResponse } = this.props.administration;
        if (addLessonDateResponse.data == 1) {
          myMessage.success('添加成功', 2);
          events.push(event);
          this.props.onOk(events);
          form.resetFields();
          this.setState({ addVisible: false });
        }
      });
    });
  };
  renderOptions = () => {
    const { classList } = this.state;
    return classList.map((item, index) => {
      return (
        <Select.Option key={index} value={item.id}>
          {item.name}
        </Select.Option>
      );
    });
  };
  render() {
    const { addVisible } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { classList } = this.state;
    return (
      <div>
        <Modal
          visible={addVisible}
          title="添加课时"
          okText="确定"
          onCancel={this.handleAddCancel}
          onOk={this.handleAddCreate}
        >
          <Form>
            <FormItem label="请选择时长" labelCol={{ span: 5 }} wrapperCol={{ span: 12 }}>
              {getFieldDecorator('lessonTime', {
                rules: [{ required: true, message: '请选择时长' }],
              })(
                <InputNumber
                  min={30}
                  max={999}
                  formatter={value => `${value}分钟`}
                  parser={value => value.replace('分钟', '')}
                />
              )}
            </FormItem>
            <FormItem label="请选择班级" labelCol={{ span: 5 }} wrapperCol={{ span: 12 }}>
              {getFieldDecorator('classValues', {
                rules: [{ required: true, message: '请选择班级' }],
              })(<Select style={{ width: 120 }}>{this.renderOptions()}</Select>)}
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}

export default TeacherCalendarAddForm;
